<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:31:59
 * @LastEditTime: 2021-06-24 23:32:35
 * @Description: 报表存档管理 
 * @LastEditors: xjt
-->
<template>
	<basic-container v-loading="loading" element-loading-text="数据加载中...">
		<!-- el-date-picker value-format="yyyy-MM-dd" v-model="useStartTime" type="datetime" placeholder="选择日期时间">
		</el-date-picker> -->
		 <el-date-picker
		 value-format="yyyy-MM-dd"
		      v-model="useStartTime"
		      type="date"
		      placeholder="选择日期">
		    </el-date-picker>
		<el-button @click="search()" type="primary">搜索</el-button>
		<el-button @click="download()" type="primary">导出</el-button>
		<!-- <dataList searchName="keyword" pure> -->
		<el-table :data="tableData" style="width: 100%" ref="multipleTable"
		 id="out-table">
			<el-table-column prop="date" label="序号" width="50">
				<template slot-scope="scope">
					{{scope.$index+1}}
				</template>
			</el-table-column>
			<el-table-column prop="belongto" label="行政区域" width="100">
			</el-table-column>
			<el-table-column prop="hotel_street" :show-overflow-tooltip="true" label="属地街道" width="150">
			</el-table-column>
			<el-table-column prop="hotel_name" :show-overflow-tooltip="true" label="隔离点名称" width="150">
			</el-table-column>
			<el-table-column prop="hotel_type" label="隔离点类别" width="100">
			</el-table-column>
			<el-table-column prop="hotel_addr" :show-overflow-tooltip="true" label="隔离点地址" width="170">
			</el-table-column>
			<el-table-column label="现场协调指挥专班组长">
				<el-table-column prop="zz_name" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="zzphone" label="电话" width="120">
				</el-table-column>
			</el-table-column>
			<el-table-column label="街道负责同志">
				<el-table-column prop="jd_name" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="jd_phone" label="电话" width="120">
				</el-table-column>
			</el-table-column>
			<el-table-column prop="line_phone" label="集中隔离点值守固定电话" width="150">
			</el-table-column>
			<el-table-column label="值守警力（人）">
				<el-table-column prop="police_total" label="合计" width="100">
				</el-table-column>
			</el-table-column>
			<el-table-column prop="all_person" label="当日集中隔离人数(人)" width="100">
			</el-table-column>
			<el-table-column label="集中隔离人员类别（人）">
				<el-table-column prop="inland_count" label="内地" width="50">
				</el-table-column>
				<el-table-column prop="hongkong_count" label="香港" width="50">
				</el-table-column>
				<el-table-column prop="macao_count" label="澳门" width="50">
				</el-table-column>
				<el-table-column prop="taiwan_count" label="台湾" width="50">
				</el-table-column>
				<el-table-column prop="out_count" label="外籍" width="50">
				</el-table-column>
			</el-table-column>
		</el-table>
		<!-- </dataList> -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="[5, 10, 30, 50]" :page-size="pagesize" layout="total, prev, pager, next,sizes" :total="total">
		</el-pagination>
	</basic-container>
</template>

<script>
	import {
		queryAll,
		exportAll,
		querySearch
	} from "@/views/yq-totalSearch/api/query.js";
	export default {
		data() {
			return {
				// 页面loading
				loading: false,
				tableData: [],
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				total: 0,
				useStartTime:'',//输入时间
				pickerOptions: {
				          disabledDate(time) {
				            return time.getTime() > Date.now();
				          },
				          shortcuts: [{
				            text: '今天',
				            onClick(picker) {
				              picker.$emit('pick', new Date());
				            }
				          }, {
				            text: '昨天',
				            onClick(picker) {
				              const date = new Date();
				              date.setTime(date.getTime() - 3600 * 1000 * 24);
				              picker.$emit('pick', date);
				            }
				          }, {
				            text: '一周前',
				            onClick(picker) {
				              const date = new Date();
				              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
				              picker.$emit('pick', date);
				            }
				          }]
				        },
				        value1: '',
				        value2: '',
			
			}
		},
		created() {
			// 数据请求
			this.handleUserList()
			
		},
		methods: {
			download() {
				this.publicExport(
					'xzczxdddc',
					'/statistical/export/isolatedPointsRecord', {},
					'xls',
					'get'
				);
			},
			search() {
				let useStartTime = this.useStartTime;
				let date = new Date();
				
				let year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
				let month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
				let day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
				
				let hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
				let minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
				let seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
				
				//获取当前系统时间  
				let currentDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				if (useStartTime > currentDate) {
					this.$message.error("时间不能超过当前时间")
				}else if (useStartTime.length == 0) {
					this.$message.error("请输入搜索时间")
				} else {
					// let time = Date.parse(datetime)
					// console.log(time)
					let queryDate = {queryDate:this.useStartTime};
					console.log(queryDate)
					querySearch(queryDate)
						.then(res => {
							console.log(res)
							this.tableData = res.data.data.records;
						})
						.finally(() => {
							this.loading = false;
						});
				}
			},
			// 初始页currentPage、初始每页数据数pagesize和数据data
			handleSizeChange(size) {
				this.pagesize = size;
				// this.search()
				// console.log(this.pagesize) //每页下拉显示数据
				this.handleUserList()
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				// console.log(this.currentPage) //点击第几页
				// this.search()
				this.handleUserList()
			},
			handleUserList() { //这里调接口方法
			 this.loading = true;
				let params = {size:this.pagesize,current:this.currentPage}
				queryAll(params)
					.then(res => {
						this.tableData = res.data.data.records;
						this.total = res.data.data.total;
					})
					.finally(() => {
						this.loading = false;
					});
			}
		},


	}
</script>

<style lang="scss" scoped>
	.el-input {
		width: 30%;
		padding: 20px;
	}
	.el-pagination {
	    float: right;
	}
</style>
